<template>
<div>
     <el-row :gutter='20'>
        <el-col :span='7'>
            <me-link></me-link>
            <me-notice></me-notice>
        </el-col>
        <el-col :span='17' class='main-cont'>
            <me-title :title='title'></me-title>
            <br>
            <div class='box-data-info'>
                <div class='title'>
                    <div class='name'>NPC任务介绍</div>
                </div>
                <div class='article'>
                    <table class="basic-table" cellspacing="0">
                        <thead>
                            <tr><th style="width:150px;">人物名称</th><th>坐标</th><th>地址</th></tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in NpcData" :key="item.id">
                                <td>{{item.name}}</td>
                                <td>{{item.coordinate}}</td>
                                <td>{{item.address}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script type="text/javascript">
import Link from '@/components/utils/Link'
import Notice from '@/components/utils/Notice'
import Title from '@/components/utils/Title'
import ScrollReveal from 'scrollreveal'
import Npc from './npc.js'
export default {
    components : {
        'me-link' : Link,
        'me-notice' : Notice,
        'me-title' : Title
    },
    created(){
        this.NpcData = Npc.datas 
    },
    data : function(){
        return {
            'NpcData':[],
            'title' : {
                'name' : '游戏资料',
                'sub' : 'GAME DATA',
                'posi' : '位置 > ',
                'now' : '游戏资料',
                'icon' : '/static/image/data/icon-title.png'
            },
            'dataLinks' : [
                {
                    'title' : '游戏介绍',
                    'children' : [
                        {
                            'title' : '背景介绍',
                            'url' : ''
                        },{
                            'title' : '任务指引',
                            'url' : ''
                        },{
                            'title' : '职业树',
                            'url' : ''
                        }
                    ]
                },{
                    'title' : '特色系统',
                    'children' : [
                        {
                            'title' : '战斗系统',
                            'url' : ''
                        },{
                            'title' : '工会系统',
                            'url' : ''
                        },{
                            'title' : '连击系统',
                            'url' : ''
                        },{
                            'title' : '房屋系统',
                            'url' : ''
                        }
                    ]
                },{
                    'title' : '玩法介绍',
                    'children' : [
                        {
                            'title' : '机甲DIY',
                            'url' : ''
                        },{
                            'title' : '一转机甲',
                            'url' : ''
                        },{
                            'title' : '二转机甲',
                            'url' : ''
                        }
                    ]
                },{
                    'title' : '商店系统',
                    'children' : [
                        {
                            'title' : '游戏商店',
                            'url' : ''
                        }
                    ]
                }
            ]
        }
    },
    mounted : function(){
        var sr = ScrollReveal({
            'origin' : 'bottom',
            'distance' : '20px',
            'duration' : 500,
            'delay' : 400
        })

        sr.reveal('.main-cont')
    }
}
</script>